<template>
  <view class="appointment-page">
    <!-- 顶部导航 -->
    <view class="nav-header">
      <view class="back-btn" @tap="goBack">
        <text class="iconfont">&#xe60e;</text>
      </view>
      <view class="page-title">预约信息</view>
      <view class="placeholder"></view>
    </view>
    
    <!-- 养老院信息卡片 -->
    <view class="home-card">
      <view class="home-name">{{ nursingHomeName }}</view>
      <view class="address-row">
        <text class="iconfont address-icon">&#xe614;</text>
        <text class="address-text">{{ nursingHomeAddress }}</text>
      </view>
    </view>
    
    <!-- 表单区域 -->
    <view class="form-container">
      <!-- 表单项 -->
      <view class="form-group">
        <view class="form-item">
          <view class="label required">联系人</view>
          <view class="input-wrapper">
            <input 
              type="text" 
              v-model="formData.name" 
              placeholder="请输入联系人姓名" 
              placeholder-class="placeholder"
              class="input"
              maxlength="10"
            />
            <text class="iconfont input-icon">&#xe60d;</text>
          </view>
        </view>
        
        <view class="form-item">
          <view class="label required">手机号码</view>
          <view class="input-wrapper">
            <input 
              type="number" 
              v-model="formData.phone" 
              placeholder="请输入联系电话" 
              placeholder-class="placeholder"
              class="input"
              maxlength="11"
            />
            <text class="iconfont input-icon">&#xe638;</text>
          </view>
        </view>
        
        <view class="form-item">
          <view class="label required">参观人数</view>
          <view class="counter-input">
            <view class="counter-btn minus" @tap="decreaseCount">
              <text class="counter-icon">-</text>
            </view>
            <input 
              type="number" 
              v-model="formData.visitors" 
              class="counter-value"
              disabled
            />
            <view class="counter-btn plus" @tap="increaseCount">
              <text class="counter-icon">+</text>
            </view>
          </view>
        </view>
        
        <view class="form-item">
          <view class="label required">预约日期</view>
          <view class="input-wrapper">
            <picker 
              mode="date"
              :value="formData.date"
              :start="startDate"
              :end="endDate"
              @change="onDateChange"
              fields="day"
            >
              <view class="date-picker">
                <text v-if="!formData.date" class="placeholder-text">请选择预约日期</text>
                <text v-else class="date-text">{{ formatDisplayDate(formData.date) }}</text>
                <text class="iconfont calendar-icon">&#xe62d;</text>
              </view>
            </picker>
          </view>
        </view>
        
        <view class="form-item">
          <view class="label">备注信息</view>
          <view class="textarea-wrapper">
            <textarea 
              v-model="formData.remark" 
              placeholder="请输入备注信息，如特殊需求等（选填）" 
              placeholder-class="placeholder"
              class="textarea"
              maxlength="200"
            />
            <view class="word-count">{{ formData.remark.length }}/200</view>
          </view>
        </view>
      </view>
      
      <!-- 条款说明 -->
      <view class="terms">
        <view class="checkbox" :class="{ 'checked': agreedTerms }" @tap="toggleTerms">
          <text class="iconfont check-icon" v-if="agreedTerms">&#xe600;</text>
        </view>
        <text class="terms-text">我已阅读并同意<text class="terms-link" @tap="showTerms">《预约服务条款》</text></text>
      </view>
      
      <!-- 提交按钮 -->
      <view class="submit-btn" :class="{ 'active': isFormValid }" @tap="submitAppointment">
        <text>提交预约</text>
      </view>
    </view>

    <!-- 日期选择器蒙层(仅作展示，实际使用系统日期选择器) -->
    <view class="date-picker-mask" v-if="false">
      <view class="date-picker-container">
        <view class="date-picker-header">
          <text @tap="closeDatePicker">取消</text>
          <text>选择日期</text>
          <text @tap="confirmDatePicker" class="confirm-text">完成</text>
        </view>
        <view class="date-picker-body">
          <!-- 日期选择器内容 -->
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue';

// 养老院ID和名称
const nursingHomeId = ref('');
const nursingHomeName = ref('阳光养老院');
const nursingHomeAddress = ref('北京市海淀区西三旗建材城西路88号');

// 表单数据
const formData = reactive({
  name: '',
  phone: '',
  visitors: 1,
  date: '',
  remark: ''
});

// 是否同意条款
const agreedTerms = ref(false);

// 日期范围 - 今天到未来30天
const today = new Date();
const startDate = computed(() => {
  return formatDate(today);
});
const endDate = computed(() => {
  const futureDate = new Date();
  futureDate.setDate(today.getDate() + 30);
  return formatDate(futureDate);
});

// 表单是否有效
const isFormValid = computed(() => {
  return formData.name.trim() && 
         /^1\d{10}$/.test(formData.phone) && 
         formData.date && 
         agreedTerms.value;
});

// 页面加载
onMounted(() => {
  // 从URL获取养老院ID和名称
  const pages = getCurrentPages();
  const page = pages[pages.length - 1];
  const options = page.$page?.options || {};
  
  nursingHomeId.value = options.id || '1';
  nursingHomeName.value = options.name ? decodeURIComponent(options.name) : '阳光养老院';
  
  // 获取并设置养老院地址
  nursingHomeAddress.value = options.address ? decodeURIComponent(options.address) : '北京市海淀区西三旗建材城西路88号';
  
  console.log('养老院ID:', nursingHomeId.value);
  console.log('养老院名称:', nursingHomeName.value);
  console.log('养老院地址:', nursingHomeAddress.value);
});

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 日期选择事件
const onDateChange = (e) => {
  formData.date = e.detail.value;
};

// 格式化显示日期
const formatDisplayDate = (dateStr) => {
  if (!dateStr) return '';
  const parts = dateStr.split('-');
  return `${parts[0]}年${parts[1]}月${parts[2]}日`;
};

// 显示服务条款
const showTerms = () => {
  uni.showModal({
    title: '预约服务条款',
    content: '1. 预约成功后，工作人员将与您联系确认具体参观时间。\n2. 请在预约日期当天携带有效证件前往参观。\n3. 如需取消预约，请提前24小时通知。',
    showCancel: false,
    confirmText: '我已了解'
  });
};

// 增加人数
const increaseCount = () => {
  if (formData.visitors < 10) {
    formData.visitors++;
  } else {
    uni.showToast({
      title: '最多可预约10人',
      icon: 'none'
    });
  }
};

// 减少人数
const decreaseCount = () => {
  if (formData.visitors > 1) {
    formData.visitors--;
  }
};

// 切换条款同意状态
const toggleTerms = () => {
  agreedTerms.value = !agreedTerms.value;
};

// 提交预约
const submitAppointment = () => {
  // 表单验证
  if (!formData.name.trim()) {
    return uni.showToast({
      title: '请输入联系人姓名',
      icon: 'none'
    });
  }
  
  if (!formData.phone || !/^1\d{10}$/.test(formData.phone)) {
    return uni.showToast({
      title: '请输入正确的手机号码',
      icon: 'none'
    });
  }
  
  if (!formData.date) {
    return uni.showToast({
      title: '请选择预约日期',
      icon: 'none'
    });
  }
  
  if (!agreedTerms.value) {
    return uni.showToast({
      title: '请同意预约服务条款',
      icon: 'none'
    });
  }
  
  // 提交数据
  console.log('提交预约数据', {
    nursingHomeId: nursingHomeId.value,
    ...formData
  });
  
  // 模拟提交成功
  uni.showLoading({
    title: '提交中...'
  });
  
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({
      title: '预约成功',
      icon: 'success',
      duration: 2000,
      success: () => {
        setTimeout(() => {
          uni.navigateBack();
        }, 2000);
      }
    });
  }, 1500);
};

// 格式化日期
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};
</script>

<style lang="scss">
.appointment-page {
  min-height: 100vh;
  background-color: #f8fbfb;
  padding-bottom: 40px;
  box-sizing: border-box;
  
  // 顶部导航
  .nav-header {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    position: relative;
    
    .back-btn {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        font-size: 20px;
        color: #333;
      }
    }
    
    .page-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
    
    .placeholder {
      width: 30px;
    }
  }
  
  // 养老院信息卡片
  .home-card {
    margin: 15px;
    padding: 16px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    
    .home-name {
      font-size: 18px;
      font-weight: 600;
      color: #2c7873;
      margin-bottom: 10px;
    }
    
    .address-row {
      display: flex;
      align-items: flex-start;
      
      .address-icon {
        font-size: 16px;
        color: #999;
        margin-right: 6px;
        margin-top: 2px;
      }
      
      .address-text {
        font-size: 14px;
        color: #666;
        line-height: 1.4;
        flex: 1;
        word-break: break-all;
      }
    }
  }
  
  // 表单区域
  .form-container {
    margin: 15px;
    padding: 20px 16px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    
    .form-group {
      margin-bottom: 20px;
      
      .form-item {
        margin-bottom: 20px;
        position: relative;
        
        .label {
          font-size: 15px;
          font-weight: 500;
          color: #333;
          margin-bottom: 8px;
          display: flex;
          align-items: center;
          
          &.required:after {
            content: '*';
            color: #ff6b6b;
            margin-left: 4px;
          }
        }
        
        .input-wrapper {
          position: relative;
          width: 100%;
          
          .input-icon, .calendar-icon {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 16px;
            color: #aaa;
            z-index: 1;
          }
        }
        
        .input, .date-picker {
          width: 100%;
          height: 48px;
          background-color: #f8fbfb;
          border-radius: 10px;
          padding: 0 15px;
          font-size: 15px;
          color: #333;
          border: 1px solid #e6eaea;
          transition: all 0.3s ease;
          box-sizing: border-box;
          
          &:focus {
            border-color: #2c7873;
            box-shadow: 0 0 0 2px rgba(44, 120, 115, 0.1);
          }
        }
        
        .date-picker {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-right: 40px;
          
          .placeholder-text {
            color: #aaa;
          }
          
          .date-text {
            color: #333;
            font-weight: 500;
          }
        }
        
        .placeholder {
          color: #aaa;
        }
        
        .textarea-wrapper {
          position: relative;
          width: 100%;
        }
        
        .textarea {
          width: 100%;
          height: 100px;
          background-color: #f8fbfb;
          border-radius: 10px;
          padding: 12px 15px;
          font-size: 15px;
          color: #333;
          border: 1px solid #e6eaea;
          transition: all 0.3s ease;
          box-sizing: border-box;
          
          &:focus {
            border-color: #2c7873;
            box-shadow: 0 0 0 2px rgba(44, 120, 115, 0.1);
          }
        }
        
        .word-count {
          position: absolute;
          right: 10px;
          bottom: 10px;
          font-size: 12px;
          color: #aaa;
          background-color: rgba(248, 251, 251, 0.8);
          padding: 2px 5px;
          border-radius: 10px;
        }
        
        .counter-input {
          display: flex;
          align-items: center;
          border-radius: 10px;
          overflow: hidden;
          width: 140px;
          border: 1px solid #e6eaea;
          background-color: #f8fbfb;
          
          .counter-btn {
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            
            .counter-icon {
              font-size: 20px;
              font-weight: 400;
              color: #333;
            }
            
            &.minus {
              border-right: 1px solid #e6eaea;
              
              &:active {
                background-color: rgba(255, 107, 107, 0.1);
              }
            }
            
            &.plus {
              border-left: 1px solid #e6eaea;
              
              &:active {
                background-color: rgba(44, 120, 115, 0.1);
              }
            }
          }
          
          .counter-value {
            flex: 1;
            height: 44px;
            text-align: center;
            font-size: 16px;
            color: #333;
            border: none;
            outline: none;
            background-color: #fff;
            font-weight: 500;
          }
        }
      }
    }
    
    // 条款同意
    .terms {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      color: #999;
      margin-bottom: 24px;
      
      .checkbox {
        width: 18px;
        height: 18px;
        border-radius: 4px;
        border: 1px solid #ddd;
        margin-right: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f8fbfb;
        flex-shrink: 0;
        transition: all 0.2s ease;
        
        &.checked {
          background-color: #2c7873;
          border-color: #2c7873;
        }
        
        .check-icon {
          font-size: 12px;
          color: #fff;
        }
      }
      
      .terms-text {
        line-height: 1.4;
        
        .terms-link {
          color: #2c7873;
        }
      }
    }
    
    // 提交按钮
    .submit-btn {
      width: 100%;
      height: 50px;
      background: linear-gradient(135deg, #419b94, #2c7873);
      border-radius: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(44, 120, 115, 0.2);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      
      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      
      &.active:before {
        opacity: 1;
      }
      
      text {
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        letter-spacing: 1px;
        position: relative;
        z-index: 1;
      }
      
      &:active {
        transform: translateY(2px);
        box-shadow: 0 2px 6px rgba(44, 120, 115, 0.2);
      }
    }
  }
  
  // 日期选择器蒙层
  .date-picker-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: flex;
    align-items: flex-end;
    
    .date-picker-container {
      width: 100%;
      background-color: #fff;
      border-radius: 16px 16px 0 0;
      overflow: hidden;
      
      .date-picker-header {
        display: flex;
        justify-content: space-between;
        padding: 15px;
        border-bottom: 1px solid #eee;
        
        text {
          font-size: 16px;
          color: #333;
          
          &.confirm-text {
            color: #2c7873;
            font-weight: 500;
          }
        }
      }
      
      .date-picker-body {
        padding: 15px;
        height: 220px;
      }
    }
  }
}
</style> 